/**
 * 训练开始弹窗 Web Component
 * 用法: <training-start-popup visible="true"></training-start-popup>
 */
class TrainingStartPopup extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    static get observedAttributes() {
        return ['visible'];
    }

    connectedCallback() {
        this.render();
        this.setupEventListeners();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'visible' && oldValue !== newValue) {
            this.updateVisibility();
        }
    }

    updateVisibility() {
        const visible = this.getAttribute('visible') === 'true';
        this.style.display = visible ? 'block' : 'none';
    }

    render() {
        const visible = this.getAttribute('visible') === 'true';

        this.shadowRoot.innerHTML = `
            <style>
                * {
                    box-sizing: border-box;
                }

                :host {
                    display: ${visible ? 'block' : 'none'};
                }

                .popup-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100vh;
                    height: 100dvh;
                    background-color: rgba(0, 0, 0, 0.7);
                    z-index: 99999;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 5vw;
                }

                .popup {
                    width: 85vw;
                    max-width: 340px;
                    background-color: #ffffff;
                    border-radius: clamp(12px, 3vw, 20px);
                    padding: 8vw 6vw;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                .popup-title {
                    font-size: clamp(18px, 5vw, 24px);
                    font-weight: bold;
                    color: #333333;
                    text-align: center;
                    margin-bottom: 3vw;
                }

                .popup-subtitle {
                    font-size: clamp(14px, 3.5vw, 16px);
                    color: #666666;
                    text-align: center;
                    margin-bottom: 6vw;
                    line-height: 1.5;
                }

                .start-btn {
                    width: 100%;
                    height: clamp(44px, 12vw, 52px);
                    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
                    border: none;
                    border-radius: 999px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
                    cursor: pointer;
                    transition: transform 0.2s ease;
                }

                .start-btn:active {
                    transform: scale(0.95);
                }

                .btn-text {
                    font-size: clamp(16px, 4vw, 18px);
                    font-weight: bold;
                    color: #ffffff;
                }

                @media (max-width: 375px) {
                    .popup {
                        padding: 30px 20px;
                    }
                }
            </style>

            <div class="popup-overlay">
                <div class="popup">
                    <div class="popup-title">开始训练</div>
                    <div class="popup-subtitle">点击下方按钮开始康复训练</div>
                    <button class="start-btn">
                        <span class="btn-text">开始训练</span>
                    </button>
                </div>
            </div>
        `;
    }

    setupEventListeners() {
        const btn = this.shadowRoot.querySelector('.start-btn');
        if (btn) {
            btn.addEventListener('click', () => {
                console.log('🚀 [training-start-popup] 开始训练按钮被点击');
                this.dispatchEvent(
                    new CustomEvent('start-training', {
                        bubbles: true,
                        composed: true
                    })
                );
            });
        }
    }
}

// 注册自定义元素
customElements.define('training-start-popup', TrainingStartPopup);
